<template>
  <div class="recommend-container">
    <div class="main-content">
      <!-- 搜索历史分析 -->
      <div class="search-analysis">
        <h2>搜索历史分析</h2>
        <div class="analysis-cards">
          <el-card class="analysis-card">
            <template #header>
              <div class="card-header">
                <span>常用学科</span>
                <el-tag type="primary">TOP 3</el-tag>
              </div>
            </template>
            <div class="tag-list">
              <el-tag v-for="subject in topSubjects" 
                      :key="subject.name" 
                      size="large"
                      :type="subject.type">
                {{ subject.name }}
                <span class="count">({{ subject.count }})</span>
              </el-tag>
            </div>
          </el-card>

          <el-card class="analysis-card">
            <template #header>
              <div class="card-header">
                <span>常用资源类型</span>
                <el-tag type="success">TOP 3</el-tag>
              </div>
            </template>
            <div class="tag-list">
              <el-tag v-for="type in topTypes" 
                      :key="type.name" 
                      size="large"
                      :type="type.type">
                {{ type.name }}
                <span class="count">({{ type.count }})</span>
              </el-tag>
            </div>
          </el-card>

          <el-card class="analysis-card">
            <template #header>
              <div class="card-header">
                <span>常用知识点</span>
                <el-tag type="warning">TOP 5</el-tag>
              </div>
            </template>
            <div class="tag-list">
              <el-tag v-for="point in topPoints" 
                      :key="point.name" 
                      size="large"
                      :type="point.type">
                {{ point.name }}
                <span class="count">({{ point.count }})</span>
              </el-tag>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 个性化推荐 -->
      <div class="personal-recommend">
        <h2>个性化推荐</h2>
        <div class="recommend-filters">
          <el-select v-model="filterType" placeholder="资源类型" @change="handleFilterChange">
            <el-option label="全部" value="all" />
            <el-option label="视频资源" value="video" />
            <el-option label="音频资源" value="audio" />
            <el-option label="图片资源" value="image" />
            <el-option label="知识图谱" value="knowledge" />
          </el-select>
          <el-select v-model="filterSubject" placeholder="学科" @change="handleFilterChange">
            <el-option label="全部" value="all" />
            <el-option v-for="subject in subjects" 
                      :key="subject.value" 
                      :label="subject.label" 
                      :value="subject.value" />
          </el-select>
        </div>

        <div class="recommend-list">
          <el-card v-for="item in recommendList" 
                   :key="item.id" 
                   class="recommend-item"
                   shadow="hover">
            <div class="item-content">
              <div class="item-cover">
                <el-image :src="item.cover" fit="cover">
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="item-info">
                <h3>{{ item.title }}</h3>
                <p class="description">{{ item.description }}</p>
                <div class="tags">
                  <el-tag size="small" :type="item.type">{{ item.resourceType }}</el-tag>
                  <el-tag size="small" type="info">{{ item.subject }}</el-tag>
                  <el-tag size="small" type="success">{{ item.grade }}</el-tag>
                </div>
                <div class="meta">
                  <span><el-icon><View /></el-icon> {{ item.views }}</span>
                  <span><el-icon><Star /></el-icon> {{ item.rating }}</span>
                </div>
              </div>
            </div>
            <div class="item-actions">
              <el-button type="primary" @click="previewResource(item)">预览</el-button>
              <el-button @click="collectResource(item)">
                <el-icon><Collection /></el-icon>
                收藏
              </el-button>
            </div>
          </el-card>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12, 24, 36, 48]"
            :total="total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      :title="previewItem?.title"
      width="80%"
      class="preview-dialog"
    >
      <div v-if="previewItem" class="preview-content">
        <el-image v-if="previewItem.cover" :src="previewItem.cover" fit="contain" />
        <div class="preview-info">
          <p class="description">{{ previewItem.description }}</p>
          <div class="tags">
            <el-tag size="small" :type="previewItem.type">{{ previewItem.resourceType }}</el-tag>
            <el-tag size="small" type="info">{{ previewItem.subject }}</el-tag>
            <el-tag size="small" type="success">{{ previewItem.grade }}</el-tag>
          </div>
          <div class="meta">
            <span><el-icon><View /></el-icon> {{ previewItem.views }}</span>
            <span><el-icon><Star /></el-icon> {{ previewItem.rating }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Picture, View, Star, Collection } from '@element-plus/icons-vue'
import axios from 'axios'

// 搜索历史分析数据
const topSubjects = ref([
  { name: '数学', count: 156, type: 'primary' },
  { name: '语文', count: 98, type: 'success' },
  { name: '英语', count: 76, type: 'warning' }
])

const topTypes = ref([
  { name: '视频资源', count: 89, type: 'primary' },
  { name: '知识图谱', count: 67, type: 'success' },
  { name: '图片资源', count: 45, type: 'warning' }
])

const topPoints = ref([
  { name: '函数', count: 45, type: 'primary' },
  { name: '几何', count: 38, type: 'success' },
  { name: '代数', count: 32, type: 'warning' },
  { name: '概率', count: 28, type: 'info' },
  { name: '统计', count: 25, type: 'danger' }
])

// 学科选项
const subjects = ref([
  { value: 'math', label: '数学' },
  { value: 'chinese', label: '语文' },
  { value: 'english', label: '英语' },
  { value: 'physics', label: '物理' },
  { value: 'chemistry', label: '化学' },
  { value: 'biology', label: '生物' }
])

// 筛选条件
const filterType = ref('all')
const filterSubject = ref('all')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(100)

// 推荐列表数据
const recommendList = ref([
  {
    id: 1,
    title: '高中数学函数专题讲解',
    description: '详细讲解高中数学中的函数概念、性质和常见题型，包含大量例题和解题技巧。',
    cover: 'https://example.com/math-function.jpg',
    resourceType: '视频资源',
    type: 'primary',
    subject: '数学',
    grade: '高中',
    views: 1234,
    rating: 4.8
  },
  {
    id: 2,
    title: '初中语文阅读理解技巧',
    description: '系统介绍初中语文阅读理解的解题方法和技巧，包含典型例题分析。',
    cover: 'https://example.com/chinese-reading.jpg',
    resourceType: '知识图谱',
    type: 'success',
    subject: '语文',
    grade: '初中',
    views: 986,
    rating: 4.6
  },
  // 更多推荐项...
])

// 预览相关
const previewVisible = ref(false)
const previewItem = ref(null)

// 处理筛选变化
const handleFilterChange = () => {
  // 实现筛选逻辑
  ElMessage.success('已更新筛选条件')
}

// 处理分页
const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}

// 预览资源
const previewResource = (item) => {
  previewItem.value = item
  previewVisible.value = true
}

// 收藏资源
const collectResource = (item) => {
  ElMessage.success(`已收藏：${item.title}`)
}

// 初始化加载
onMounted(async () => {
  try {
    // 获取搜索历史分析数据
    const analysisResponse = await axios.get('/api/resources/analysis')
    // 获取推荐列表数据
    const recommendResponse = await axios.get('/api/resources/recommend', {
      params: {
        type: filterType.value,
        subject: filterSubject.value,
        page: currentPage.value,
        pageSize: pageSize.value
      }
    })
    // 更新数据
  } catch (error) {
    ElMessage.error('加载数据失败')
  }
})
</script>

<style scoped>
.recommend-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.main-content {
  margin-top: 0px;
}

.search-analysis {
  margin-bottom: 30px;
}

.analysis-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.analysis-card {
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-list .count {
  margin-left: 5px;
  font-size: 0.9em;
  opacity: 0.8;
}

.recommend-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.recommend-item {
  border-radius: 8px;
  transition: all 0.3s;
}

.recommend-item:hover {
  transform: translateY(-5px);
}

.item-content {
  display: flex;
  gap: 15px;
}

.item-cover {
  width: 120px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
}

.item-info {
  flex: 1;
}

.item-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.description {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.meta {
  display: flex;
  gap: 15px;
  color: #909399;
  font-size: 14px;
}

.meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.preview-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.preview-content {
  display: flex;
  gap: 20px;
}

.preview-content .el-image {
  width: 300px;
  height: 200px;
  border-radius: 4px;
}

.preview-info {
  flex: 1;
}

.preview-info .description {
  margin-bottom: 15px;
  line-height: 1.6;
}
</style> 